<template>
  <!-- oce 固定class -->
  <!-- <div :class="b({card: !option.card})"> -->
  <div class="avue-crud avue-crud--card">
    <component
      :is="tableOption.titleSize || 'h2'"
      :style="tableOption.titleStyle"
      v-if="tableOption.title"
      >{{ tableOption.title }}</component
    >
    <!-- oce 调整功能列位置 -->
    <!-- 表格功能列 -->
    <header-menu ref="headerMenu" v-if="vaildData(tableOption.header, true)">
      <template slot="menuLeft" slot-scope="scope">
        <slot name="menuLeft" v-bind="scope"></slot>
      </template>
      <template slot="menuRight" slot-scope="scope">
        <slot name="menuRight" v-bind="scope"></slot>
      </template>
    </header-menu>
    <!-- 搜索组件 -->
    <header-search
      :search="search"
      ref="headerSearch"
      class="oce-header-search"
    >
      <template slot="search" slot-scope="scope">
        <slot name="search" v-bind="scope"></slot>
      </template>
      <template slot="searchMenu" slot-scope="scope">
        <slot name="searchMenu" v-bind="scope"></slot>
      </template>
      <template slot-scope="scope" v-for="item in searchSlot" :slot="item">
        <slot v-bind="scope" :name="item"></slot>
      </template>
    </header-search>
    <el-card :shadow="isCard">
      <el-tag
        class="avue-crud__tip"
        v-if="vaildData(tableOption.tip, config.tip) && tableOption.selection"
      >
        <span class="avue-crud__tip-name">
          {{ t('crud.tipStartTitle') }}
          <span class="avue-crud__tip-count">{{ selectLen }}</span>
          {{ t('crud.tipEndTitle') }}
        </span>
        <el-button
          type="text"
          size="small"
          @click="selectClear"
          v-permission="getPermission('selectClearBtn')"
          v-if="
            vaildData(tableOption.selectClearBtn, config.selectClearBtn) &&
            tableOption.selection
          "
          >{{ t('crud.emptyBtn') }}</el-button
        >
        <slot name="tip"></slot>
      </el-tag>
      <slot name="header"></slot>
      <el-form
        :model="cellForm"
        :show-message="false"
        @validate="handleValidate"
        ref="cellForm"
      >
        <el-table
          v-if="reload"
          :data="cellForm.list"
          :row-key="handleGetRowKeys"
          :class="{
            'avue-crud--indeterminate': vaildData(
              tableOption.indeterminate,
              false
            ),
          }"
          :size="$AVUE.tableSize || controlSize"
          :lazy="vaildData(tableOption.lazy, false)"
          :load="treeLoad"
          :tree-props="treeProps"
          :expand-row-keys="tableOption.expandRowKeys"
          :default-expand-all="tableOption.defaultExpandAll"
          :highlight-current-row="tableOption.highlightCurrentRow"
          @current-change="currentRowChange"
          @expand-change="expandChange"
          @header-dragend="headerDragend"
          :show-summary="tableOption.showSummary"
          :summary-method="tableSummaryMethod"
          :span-method="tableSpanMethod"
          :stripe="vaildData(tableOption.stripe, true)"
          :show-header="tableOption.showHeader"
          :default-sort="tableOption.defaultSort"
          @row-click="rowClick"
          @row-dblclick="rowDblclick"
          @cell-mouse-enter="cellMouseEnter"
          @cell-mouse-leave="cellMouseLeave"
          @cell-click="cellClick"
          @header-click="headerClick"
          @row-contextmenu="rowContextmenu"
          @header-contextmenu="headerContextmenu"
          @cell-dblclick="cellDblclick"
          :row-class-name="rowClassName"
          :cell-class-name="cellClassName"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          :sort-method="sortMethod"
          :sort-orders="sortOrders"
          :sort-by="sortBy"
          :fit="tableOption.fit"
          :header-cell-class-name="headerCellClassName"
          :max-height="isAutoHeight ? tableHeight : tableOption.maxHeight"
          :height="tableHeight"
          ref="table"
          :width="setPx(tableOption.width, config.width)"
          :border="tableOption.border"
          v-loading="tableLoading"
          @filter-change="filterChange"
          @selection-change="selectionChange"
          @select="select"
          @select-all="selectAll"
          @sort-change="sortChange"
        >
          <!-- 暂无数据提醒 -->
          <template slot="empty">
            <div :class="b('empty')">
              <slot name="empty" v-if="$slots.empty"></slot>
              <avue-empty
                v-else
                size="50"
                image=""
                :desc="tableOption.emptyText || '暂无数据'"
              ></avue-empty>
            </div>
          </template>
          <column :columnOption="columnOption">
            <column-default ref="columnDefault" slot="header">
              <template slot-scope="{ row, index }" slot="expand">
                <slot :row="row" :index="index" name="expand"></slot>
              </template>
            </column-default>
            <template v-for="item in mainSlot" slot-scope="scope" :slot="item">
              <slot v-bind="scope" :name="item"></slot>
            </template>
            <column-menu slot="footer">
              <template slot="menu" slot-scope="scope">
                <slot name="menu" v-bind="scope"></slot>
              </template>
              <template slot="menuBtn" slot-scope="scope">
                <slot name="menuBtn" v-bind="scope"></slot>
              </template>
            </column-menu>
          </column>
        </el-table>
      </el-form>
      <slot name="footer"></slot>
      <!-- 分页 -->
      <table-page ref="tablePage" :page="page">
        <template slot="page">
          <slot name="page"></slot>
        </template>
      </table-page>
    </el-card>
    <!-- 表单 -->
    <dialog-form ref="dialogForm">
      <template slot-scope="scope" v-for="item in formSlot" :slot="item">
        <slot v-bind="scope" :name="item"></slot>
      </template>
      <template slot-scope="scope" slot="menuForm">
        <slot name="menuForm" v-bind="scope"></slot>
      </template>
    </dialog-form>
    <dialog-column ref="dialogColumn"></dialog-column>
    <dialog-excel ref="dialogExcel"></dialog-excel>
    <dialog-filter ref="dialogFilter"></dialog-filter>
  </div>
</template>

<script>
import { Crud } from '../../../../assets/avue/avue'
import dialogColumn from './dialog-column.vue'
import dialogExcel from './dialog-excel.vue'
import dialogFilter from './dialog-filter.vue'
import dialogForm from './dialog-form.vue'
import headerMenu from './header-menu.vue'
import column from './column.vue'
import config from './config'

export default {
  name: 'OceCrud',
  extends: Crud,
  components: {
    dialogColumn,
    column,
    dialogExcel,
    dialogFilter,
    dialogForm,
    headerMenu,
  },
  data() {
    return {
      config,
    }
  },
  computed: {
    isAutoHeight() {
      // console.log('isAutoHeight', this.tableOption.height)
      return (
        this.tableOption.height === 'auto' ||
        this.tableOption.height === undefined
      )
    },
  },
  created() {
    this.setMinWidth(this.tableOption.column, 16, 20)
  },
  activated() {
    this.$refs.table?.doLayout()
  },
  methods: {
    setMinWidth(columns, charsWidth = 10, padding = 0) {
      columns.forEach((item) => {
        if (!item.minWidth && item.label.length) {
          // eslint-disable-next-line no-param-reassign
          item.minWidth = item.label.length * charsWidth + padding
        }
      })
    },
    // oce 重写该方法，使用时可不需要在配置calcHeight
    getTableHeight() {
      if (this.isAutoHeight) {
        this.$nextTick(() => {
          const tableRef = this.$refs.table
          const tablePageRef = this.$refs.tablePage
          if (!tableRef) return
          const tableStyle = tableRef.$el
          const pageStyle = tablePageRef.$el.offsetHeight || 20
          let tableHeight =
            config.clientHeight -
            tableStyle.offsetTop -
            pageStyle -
            this.calcHeight -
            this.$el.getBoundingClientRect().top -
            12
          if (tableHeight < 300) {
            this.tableHeight = 300
          } else {
            this.tableHeight = tableHeight
          }
          // 页面可视高度
          // console.log('config.clientHeight:', config.clientHeight)
          // // 当前组件距离上部分高度
          // console.log('tableStyle.offsetTop:', tableStyle.offsetTop)
          // // 分页栏高度
          // console.log('pageStyle:', pageStyle)
          // // 配置高度
          // console.log('this.calcHeight:', this.calcHeight)
          // console.log('tableHeight:', this.tableHeight)
          // console.log(this.$el.getBoundingClientRect())
        })
      } else {
        this.tableHeight = this.tableOption.height
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.avue-crud {
  overflow: hidden !important;
  ::v-deep .el-drawer__wrapper {
    // oce 列显隐控制到表格内
    position: absolute !important;
  }
  ::v-deep .avue-crud__pagination {
    // oce 分页栏居中
    text-align: center;
  }
  ::v-deep .el-form {
    > .el-table {
      // oce 高度修改过渡效果
      transition: all 500ms ease 0s;
    }
  }
  .oce-header-search {
    border: 1px #dcdfe6 solid;
    border-radius: 8px;
    padding: 8px 0;
    margin: 4px;

    ::v-deep .el-form-item {
      // 清除默认盒子模型
      margin-bottom: 0;
    }

    ::v-deep .avue-form__row {
      padding: 8px 16px !important;
    }

    // ocean 搜索栏按钮样式
    ::v-deep .avue-form__menu {
      padding: 8px 2px !important;
      .el-button--mini {
        // font-size: 14px;
      }
    }
  }
  // ocean 查看样式bug修复
  ::v-deep.avue--detail {
    .el-form-item--mini.el-form-item {
      margin-bottom: 0 !important;
    }
    .el-col-md-24.avue-form__row.table-option-divider {
      // padding-top: 10px !important;
      border-top: 1px solid #ebeef5 !important;
      margin-top: -1px;
      // margin-left: -1px;
    }
    .avue-date {
      .el-input__icon.el-icon-time,
      .el-input__icon.el-icon-date {
        display: none;
      }
    }
    .el-col-md-24.avue-form__row {
      margin-left: -1px;
      .avue-form__item-- {
        .el-form-item__content {
          padding-top: 10px !important;

          button {
            display: none;
          }
        }
      }
    }
  }
  ::v-deep.avue-crud__pagination {
    padding: 16px 0 12px 20px;
  }
  // 隐藏表单默认全屏按钮
  ::v-deep.avue-crud__dialog__menu {
    .el-dialog__close.el-icon-full-screen {
      display: none;
    }
  }
}
</style>
